<template>
    <layout-default
            name="search"
            :showHeader="false"
            :bg="step === 1 ? 'white' : '#f7f7f7'"
            :loaded="true">
        <div class="search-header">
            <div class="h-back" @click="back">
                <i class="iconfont icon-i-back"></i>
            </div>
            <div class="h-search">
                <div class="s-icon">
                    <i class="iconfont icon-sousuo"></i>
                </div>
                <div class="s-input">
                    <input type="search" placeholder="文章/标签" v-model="form.keyword"/>
                </div>
                <div class="s-btn border-1px-left" @click="search">
                    <span>搜索</span>
                </div>
            </div>
        </div>
        <div class="search-view">
            <div class="v-default" v-if="step === 1">
                <div class="d-section">
                    <div class="s-title">
                        <div class="t-left">
                            <span>搜索历史</span>
                        </div>
                        <div class="t-right">
                            <i class="iconfont icon-Eliminate"></i>
                        </div>
                    </div>
                    <div class="s-content">
                        <div class="c-item" :key="key" v-for="(item, key) in history">
                            <span>{{item}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="v-result" v-else>
                <div class="r-item"
                     @click="go(`/article/${item.id}`)"
                     :key="key"
                     v-for="(item ,key) in list">
                    <div class="i-author">
                        <div class="a-left">
                            <img :src="item.user.avatar | avatar" alt="">
                            <span>{{item.user.nickname}}</span>
                        </div>
                        <div class="a-right">
                            <span :key="key1" v-for="(item1, key1) in item.tag">{{item1.name}}</span>
                        </div>
                    </div>
                    <div class="i-content" :class="{'i-content-with-cover': item.cover}">
                        <div class="c-left">
                            <div class="l-title">
                                <span>{{item.title}}</span>
                            </div>
                            <div class="l-desc">
                                <p>{{item.text | mdText}}</p>
                            </div>
                        </div>
                        <div class="c-right"
                             :style="{backgroundImage: `url(//cdn.kyeteo.cn/${item.cover})`}" v-if="item.cover"></div>
                    </div>
                    <div class="i-do">
                        <div class="d-item">
                            <i class="iconfont icon-dianzan"></i>
                            <span>{{item.praise_count}}</span>
                        </div>
                        <div class="d-item">
                            <i class="iconfont icon-pinglun"></i>
                            <span>{{item.comment_count}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </layout-default>
</template>

<script>
    import searchHistory from '@/libs/search-history'
    export default {
        data () {
            return {
                step: 1,
                history: searchHistory.get(),
                form: {
                    keyword: '',
                    index: 1,
                    size: 10
                },
                list: []
            }
        },
        methods: {
            async search () {
                if (!this.form.keyword) {
                    this.$toast.fail('关键字不能为空')
                    return
                }
                this.step = 2
                const resp = await this.$api.article.search(this.form)
                if (resp.done) {
                    searchHistory.set(this.form.keyword)
                    resp.data.forEach(i => {
                        this.list.push(i)
                    })
                }
            }
        }
    }
</script>

<style lang="less">
    .search {
        .search-header {
            position: fixed;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100px;
            box-sizing: border-box;
            padding: 0 30px;
            background: white;
            z-index: 1000;

            .h-back {
                display: flex;
                align-items: center;
                width: 70px;

                i {
                    font-size: 50px;
                }
            }

            .h-search {
                display: flex;
                align-items: center;
                height: 70px;
                flex: 1;
                padding: 0 20px;
                border-radius: 10px;
                background: #f7f7f7;

                .s-icon {
                    i {
                        font-size: 40px;
                    }
                }

                .s-input {
                    flex: 1;
                    padding: 0 20px;

                    input {
                        width: 100%;
                        border: none;
                        outline: none;
                        background: #f7f7f7;
                        &::-webkit-search-cancel-button {
                            display: none;
                        }
                    }
                }

                .s-btn {
                    padding-left: 20px;

                    span {
                        color: #71777c;
                    }
                }
            }
        }
        .search-view{
            padding-top: 100px;
            .v-default{
                .d-section{
                    .s-title{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        height: 100px;
                        padding: 0 30px;
                        .t-left{
                            span{
                                font-weight: 600;
                            }
                        }
                        .t-right{
                            i{
                                font-size: 50px;
                                color:#71777c;
                            }
                        }
                    }
                    .s-content{
                        display: flex;
                        flex-wrap: wrap;
                        padding: 0 30px;
                        .c-item{
                            display: flex;
                            align-items: center;
                            height: 60px;
                            padding: 0 20px;
                            border-radius: 30px;
                            background: #f7f7f7;
                            span{
                                color:#71777c;
                            }
                            &:not(:first-child){
                                margin-left: 30px;
                            }
                        }
                    }
                }
            }
            .v-result{
                padding: 20px 0;
                .r-item{
                    padding-bottom: 30px;
                    background: white;

                    .i-author {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        height: 106px;
                        padding: 0 30px;

                        .a-left {
                            display: flex;
                            align-items: center;

                            img {
                                width: 44px;
                                height: 44px;
                                border-radius: 22px;
                            }

                            span {
                                padding-left: 10px;
                            }
                        }

                        .a-right {
                            span {
                                color: #71777c;
                            }
                        }
                    }

                    .i-content {
                        position: relative;
                        padding: 0 30px;
                        .c-left{
                            .l-title {
                                span {
                                    font-size: 34px;
                                    font-weight: 700;
                                }
                            }

                            .l-desc {
                                padding: 20px 0;
                                color: #71777c;
                            }
                        }
                        .c-right{
                            position: absolute;
                            top:50%;
                            right:30px;
                            transform: translateY(-50%);
                            width: 180px;
                            height: 180px;
                            background-size: auto 100%;
                        }
                        &-with-cover{
                            .c-left{
                                padding-right: 200px;
                            }
                        }
                    }

                    .i-do {
                        display: flex;
                        padding: 0 30px;

                        .d-item {
                            display: flex;
                            align-items: center;
                            color: #71777c;

                            i {
                                font-size: 40px;
                            }

                            span {
                                font-size: 28px;
                            }

                            &:not(:first-child) {
                                margin-left: 40px;
                            }
                        }
                    }
                    &:not(:first-child) {
                        margin-top: 20px;
                    }
                }
            }
        }
    }
</style>